import { GraphModel, h, NodeConfig, PolygonNode, PolygonNodeModel } from '@logicflow/core'
import { nodeStyleHandle } from '../tool'

class ForkModel extends PolygonNodeModel {
  static extendKey = 'ForkModel';
  constructor (data: NodeConfig, graphModel: GraphModel) {
    if (!data.text) {
      data.text = ''
    }
    if (data.text && typeof data.text === 'string') {
      data.text = {
        value: data.text,
        x: data.x,
        y: data.y + 40
      }
    }
    super(data, graphModel)
    this.points = [
      [25, 0],
      [50, 25],
      [25, 50],
      [0, 25]
    ]
  }

  getNodeStyle (): {
    [x: string]: any;
    fill?: string;
    stroke?: string;
    strokeWidth?: number;
    } {
    const style = super.getNodeStyle()
    return nodeStyleHandle(this, style)
  }
}

class ForkView extends PolygonNode {
  static extendKey = 'ForkNode';
  getShape (): h.JSX.Element {
    const { model } = this.props
    const { x, y, width, height, points } = model
    const style = model.getNodeStyle()
    return h(
      'g',
      {
        transform: `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
      },
      h('polygon', {
        ...style,
        x,
        y,
        points
      }),
      h(
        'svg',
        {
          x: (width - 34) / 2,
          y: (height - 32) / 2,
          width: 32,
          height: 32,
          viewBox: '0 0 1024 1024'
        },
        h('path', {
          fill: style.stroke,
          d: 'M768 470.058667c-11.52 0-22.613333-4.693333-30.293333-12.373334a42.496 42.496 0 0 1-0.426667-60.458666V396.8l55.296-54.954667H576.426667l-119.466667 170.24 119.893333 170.922667h216.149334l-55.68-55.381333a42.112 42.112 0 0 1 0-60.501334c16.64-17.066667 43.52-17.066667 60.586666 0l128 127.786667a42.752 42.752 0 0 1-6.997333 66.602667l-121.429333 121.216c-8.106667 7.68-19.2 12.373333-30.293334 12.373333L768 896c-11.52 0-22.613333-4.693333-30.293333-12.373333a42.496 42.496 0 0 1-0.426667-60.458667v-0.426667l54.826667-54.528H554.666667c-14.08-0.426667-27.306667-7.253333-34.986667-18.346666L384 555.264H128c-23.893333 0-42.666667-19.157333-42.666667-42.581333a42.24 42.24 0 0 1 42.666667-42.581334h254.464l136.789333-195.114666c7.68-11.52 20.906667-18.304 34.986667-18.304h238.336L737.28 201.685333v-0.426666a42.112 42.112 0 0 1 0-60.458667c16.64-17.066667 43.52-17.066667 60.586667 0l128 127.786667a41.813333 41.813333 0 0 1 11.861333 37.290666 42.752 42.752 0 0 1-17.834667 28.288l-122.453333 122.24c-8.106667 7.68-19.2 12.373333-30.293333 12.373334l0.853333 1.28z'
        })
      )
    )
  }
}

const Fork = {
  type: 'snaker:fork',
  view: ForkView,
  model: ForkModel
}

export { ForkView, ForkModel }
export default Fork
